<template>
  <div class="Remark">
    <div class="newsRate">
      <!--      输入区域-->
      <van-cell-group>
        <van-cell title="发表评论"/>
        <van-field
          v-model="remark"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
      <div class="setLevel">
        <span>来个评价吧:</span>
        <van-rate class="writeLevel" v-model="rateLevel" allow-half void-icon="star" void-color="#eee"/>
      </div>
      <van-button @click="submitRemark" type="primary">
        提&emsp;交&emsp;评&emsp;论
      </van-button>
      <!--      显示评论-->
      <van-pull-refresh v-model="refreshing"
                        @refresh="onRefresh"
                        success-text="加载完成"
                        success-duration="500">
        <van-list class="remark-list"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="getRemarks">
          <van-card v-for="item in remarkList" :key="item.id">
            <template #thumb>
              <van-icon class="userPic" name="manager"/>
              {{item.user_name}}
            </template>
            <template #title>
              <van-rate v-model="item.rate" readonly allow-half void-icon="star" void-color="#eee"/>
              <p>{{item.content}}</p>
            </template>
            <template #price class="add_time">
              {{item.add_time}}
            </template>
          </van-card>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'Remark',
  props: {
    newsId: {
      type: String
    }
  },
  data: () => ({
    remark: '',
    rateLevel: 0,
    remarkList: [],
    loading: false,
    finished: false,
    refreshing: false,
    page: {
      index: 0,
      limit: 8
    }
  }),
  methods: {
    async getRemarks () {
      this.page.index++
      const { message } = await this.$http.getRemarks(this.newsId, this.page)
      if (message.length <= 0) {
        this.finished = true
        return
      }
      this.remarkList.push(...message)
      this.loading = false
    },
    async onRefresh () { // 重新刷新数据
      // 初始化参数
      this.page.index = 0
      this.remarkList = []
      this.finished = false
      this.loading = true
      await this.getRemarks()
      this.refreshing = false
    },
    async submitRemark () {
      if (!this.remark) return Toast('您还没有评论')
      const data = {
        content: this.remark,
        rate: this.rateLevel
      }
      const res = await this.$http.submitRemake(this.newsId, data)
      if (res.affectedRows >= 1) {
        Toast('评论提交成功')
        this.rateLevel = 0
        this.remark = ''
        // 重新加载
        await this.onRefresh()
      } else {
        Toast('评论提交失败:')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .Remark {
    .newsRate {
      display: flex;
      flex-direction: column;
      padding: 20px;

      .van-cell-group {
        border: 1px solid #cccccc;

        .van-cell {
          border: none;

          &:after {
            border: none;
          }
        }

        .van-cell__title {
          font-size: 20px;
          color: #666666;
          font-weight: bold;
        }

        .van-field {
          font-size: 16px;
        }
      }

      .setLevel {
        display: flex;
        align-items: center;
        margin-top: 10px;
        align-self: flex-end;
        font-size: 16px;
        font-weight: bold;
        color: #999999;

        .writeLevel {
          margin-left: 6px;
        }
      }

      .van-button.van-button--primary {
        margin-top: 20px;
        width: 100%;
        height: 60px;
        font-size: 20px;
        font-weight: bold;
      }

      .remark-list {
        margin-top: 20px;

        .van-card__header {
          display: flex;
          align-items: center;
          padding: 10px 0;

          .van-card__thumb {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .userPic {
              font-size: 40px;
              border: 1px solid #cccccc;
              border-radius: 50%;
              padding: 8px;
              margin-bottom: 10px;
            }
          }

          .van-card__content {
            font-size: 14px;

            /deep/ .van-rate__icon {
              font-size: 14px;
            }

            p {
              margin: 4px 0;
            }
          }

          .van-card__price {
            color: #999999;
          }
        }
      }
    }
  }
</style>
